Los que utilizan jQuery en su blog pueden dar un aspecto diferente a los enlaces con Nudging.js el efecto es un sutil movimiento al pasar el puntero sobre el enlace.
Para añadirlo nos situamos en plantilla edición HTML y justo antes de </head> añadimos lo siguiente:<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '45px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '1px' }, 400);
});
});
//]]>
</script>
Si no estamos utilizando jQuery y es la primera vez que vamos a utilizarlo entonces también añadiremos justo antes del anterior:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Guardamos los cambios y queda crear los enlaces, si los añadimos en un gadget escogeremos HTML/Javascript
Url-enlace añadimos la url del sitio que vamos a enlazar.
Texto-enlace es el texto que visualizamos y hará de enlace.
Url-imagen añadiremos la url dela imagen a mostrar.
Url-icono-bullets es el lugar para añadir la url del icono o bullet.
Perdona mi ignorancia, pero yo tengo creado un blog con el nuevo diseñador de Blogger y no sé si utiliza jQuery...
Muchas gracias.
:: Hola Cadete, no tienes jQuery, estás usando Prototype y Scriptaculous es una librería distinta a jQuery y puede crear algún tipo de conflictos si añades las dos :S
No hay manera de hacer esto con css3?
Gran efecto.
JQuery, insuperable.
Saludos!
Hola Campeona, saludos. Lo intente, lo vi chiquito y dije "haaa facilito"...no me saleeeee:S
LO puse aqui:
http://listamenuyservicios.blogspot.com/
El html esta puesto en dos sitios: arriba dentro del codigo de la plantilla y abajo en un gadget HTML, no se q pasa Gem@ (??)
:: @rielCastellanos se puede intentar añadiendo mayor margen izquierdo con hover, con eso mostraría el enlace desplazado pero no el mismo efecto deslizante :S
:: Gama Cero insuperable no sé pero da mucho juego :)
:: JAIME altera el orden de los scripts y sitúa jquery.min el primero y luego Nudging.js :) lo rectifiqué en la entrada por si alguien más tiene ese problema :)
@Gem@
Muchas gracias Gema, algo de eso creí pero no lo tenía muy claro.
Un saludo.
Yaaaaaa, ahora si pues, quedo de lujo, miralo aqui:
http://www.visatperu.com/
buen aporte Gemita linda :D gracias mil !!
:: Buen trabajo Jaime!! pero los enlaces son lo de menos es el diseño lo que ha quedado de lujo :)
No!! ni los enlaces ni el diseño, la q es de lujo esa... eres TU, gracias!!
:: Ohh :$ gracias.
Me dejas asonmbrado con tu sabiduría sobre el diseño de blogs.Hay que saber mucho de páginas y estar muy al día,tengo dos y trabajo con bloguer que te lo da todo hecho pero es diferente.En hora buena.Miyares
:: miyares en lugar de sabiduría yo lo llamaría curiosidad :D de páginas no sé ni la cuarta parte de lo que me gustaría saber. Blogger es muy completo y de un tiempo a esta parte ha añadido mejores que es para quitarse el sombre, le quedan algunos detalles y ya sería lo máximo pero está bien, muy bien. Gracias por comentar :)
Hola Gema. Muy buena entrada. Lo que te digo no tiene que ver nada con ella. He añadido poner emoticonos en los comentarios, y para ello utilicé el blog de Vku, lo que ocurre es que me sale un spam publicitario, Para arreglarlo y que no me aparezca estoy subiéndome mis bichitos a dropbox, es mejor utilizar otro alojamiento? Gracias. Mi blog es :
http://lacasadelaspalabrass.blogspot.com/
:: Nadie no veo la publicidad pero respondiendo a tu pregunta te diré que en mi opinión el mejor sitio para alojar imágenes es Blogger o Picasa que viene a ser lo mismo ya que todas las imágenes que subimos quedan alojadas allí.
Gracias Gema, eso será pq he alojado el enlace de VKu en dropbox, y así utilizo mi propio enlace y ha desaparecido la publi, pero tarda más en cargar, como ves no tengo ni idea pero sólo llevo en esto desde Mayo. Creo que al final voy a poner los emoticonos como los tuyos que quedan más elegantes, jajaja A ver si me sale. Y lo haré utilizando Picassa.
GENIAL!!!! Y por cierto, TU LOGO SE MUEVE!! que bonito GEM@ :D
:: Caa el efecto del logo es el resultado de una prueba y así quedó :)
eso es posible ponerlo en las etiquetas? : D
saludos y gracias por todo
Nota: solo los miembros de este blog pueden publicar comentarios.